<script setup lang="js">
import UserAPI from '@/api/system/user';
import * as VTable from '@visactor/vtable';
import { useList } from '@/hooks/useList';
import { useSearch } from './hooks/use-search';
import ProVTable from './components/index.vue';

const {
  params,
  tableTotal,
  tableData,
  tableLoading,
  handleSearch,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
} = useList({
  request: {
    api: UserAPI.getPage,
    params: {
      customerName: '',
      contactPhone: '',
      contactName: '',
      createdStartTime: '',
      createdEndTime: '',
      followerName: '',
      status: '',
      limit: 20,
      page: 1,
    },
  },
});

const { searchAreaConfig } = useSearch();

const handleDelete = () => ElMessage.success('操作成功');
const handleChangeStatus = () => ElMessage.success('操作成功');
const handleEdit = () => {
  records.value = new Array(Math.round(Math.random() * 100)).fill(1).map((_, i) => ({
    ...defaultObj,
    name: 'lafen' + i,
    age: Math.round(Math.random() * 20),
    random: Math.round(Math.random() * 10000000000),
  }));
};

const columns = ref([
  { field: 'name', title: 'Name', width: 100 },
  { field: 'nickname', title: 'Nickname', width: 100 },
  { field: 'age', title: 'Age', width: 100 },
  { field: 'gender', title: 'Gender', width: 100 },
  { field: 'hobby', title: 'Hobby', width: 120 },
  { field: 'phone', title: 'Phone', width: 120 },
  { field: 'email', title: 'Email', width: 150 },
  { field: 'random', title: 'Random', width: 120 },
  { field: 'addr', title: 'Addr', width: 150 },
  { field: 'time', title: 'Time', width: 120 },
  { field: 'remark', title: 'Remark', width: 180 },
  { field: 'other', title: 'Other', width: 180 },
]);

const defaultObj = {
  // name: 'lafen' + i,
  nickname: 'Lafen',
  age: Math.round(Math.random() * 20),
  gender: '男',
  hobby: 'coding',
  phone: '18811111111',
  email: 'lafen@gmail.com',
  random: Math.round(Math.random() * 10000000000),
  addr: 'China.GuangDong.GuangZhou.somewhere',
  time: '2025-03-03',
  remark: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
  other:
    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur cumque sint voluptas nostrum magnam, temporibus quas, odit a optio doloribus ullam perferendis, iusto atque illum doloremque corrupti consectetur? Et.',
};
const records = ref(
  new Array(100).fill(1).map((_, i) => ({
    ...defaultObj,
    name: 'lafen' + i,
    age: Math.round(Math.random() * 20),
    random: Math.round(Math.random() * 10000000000),
  }))
);

const statusList = [
  { label: '启用', value: '1', color: 'primary' },
  { label: '禁用', value: '0', color: 'danger' },
];

const appPageConfig = reactive({
  isFlow: false,
  showFHeader: true,
  isFullscreen: false,
  isFixed: true,
});
</script>

<template>
  <AppPage v-model:config="appPageConfig">
    <template #fheader>
      <SearchArea
        v-model="params"
        :showFilter="true"
        :config="searchAreaConfig"
        @handleReset="handleReset"
        @handleSearch="handleSearch"
      />
    </template>
    <template #header>
      <el-row justify="space-between">
        <ConditionSelect
          v-model="params.status"
          clearable
          title="状态："
          boldTitle
          :options="statusList"
          @change="handleSearch()"
        />
        <section>
          <el-button type="success" icon="plus" @click="handleEdit">新增</el-button>
          <el-button type="danger" icon="delete" @click="handleDelete">删除</el-button>
          <el-button type="primary" icon="setting" @click="handleChangeStatus">启用/禁用</el-button>

          <el-tooltip content="刷新表格数据" placement="top">
            <el-button circle icon="refresh-right" @click="handleSearch()" />
          </el-tooltip>

          <el-tooltip content="隐藏 顶部搜索表单" placement="top">
            <el-button
              circle
              icon="search"
              :type="appPageConfig.showFHeader ? 'default' : 'primary'"
              @click="appPageConfig.showFHeader = !appPageConfig.showFHeader"
            />
          </el-tooltip>
          <el-tooltip content="区域全屏，该设置与 流式布局 互斥" placement="top">
            <el-button
              circle
              icon="fullScreen"
              :type="appPageConfig.isFullscreen ? 'primary' : 'default'"
              @click="appPageConfig.isFullscreen = !appPageConfig.isFullscreen"
            />
          </el-tooltip>
          <el-tooltip content="固定表格高度，该设置与 流式布局 互斥" placement="top">
            <el-button
              :type="appPageConfig.isFixed ? 'primary' : 'default'"
              circle
              @click="appPageConfig.isFixed = !appPageConfig.isFixed"
            >
              <SvgIcon icon-class="fixed" />
            </el-button>
          </el-tooltip>
        </section>
      </el-row>
    </template>
    <template #main="{ height }">
      <ProVTable :records="records" :columns="columns" :aggregationFields="['age', 'random']" :height="height" />
    </template>
    <template #ffooter>
      <Pagination
        v-model:limit="params.limit"
        v-model:page="params.page"
        :total="tableTotal"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </template>
  </AppPage>
</template>
